<template>
  <div id="left_menu">
    <div class="menu_name">
      <el-dropdown>
        <span class="el-dropdown-link">
          <div class="avatar"></div>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link v-if="is_show" to="/admin/signin">
              <li class="dropdown_li">
                <span class="top">登录/注册</span>
              </li>
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="#">
              <li class="dropdown_li">
                <span class="top">修改资料</span>
              </li>
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link v-if="!is_show" to="/admin/signin">
              <li class="dropdown_li">
                <span @click="clearCookie" class="top">退出登录</span>
              </li>
            </router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <nav>
      <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      text-color="white"
      @open="handleOpen"
      @close="handleClose"
      background-color=rgba(0,0,0,0.1) >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">首页功能</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-3">
              <router-link to="/" class="left_menu">
                首页
              </router-link>
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="1-3">
              <router-link to="/about" class="left_menu">
                关于
              </router-link>
            </el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">后台</span>
            <el-menu-item index="1-4-1">
              <router-link to="/" class="left_menu">
                首页
              </router-link>
            </el-menu-item>
            <el-menu-item index="1-4-3">
              <router-link to="/admin/articleList" class="left_menu">
                文章管理
              </router-link>
            </el-menu-item>
            <el-menu-item index="1-4-4">
              <router-link to="/admin/articleEdit" class="left_menu">
                文章发表
              </router-link>
            </el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">资源下载</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">留言板</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">相册</span>
        </el-menu-item>
      </el-menu>
    </nav>
  </div>
</template>

<script>
  export default {
    name: 'sidebar',
    data() {
      return {
        articleNumber: '',
        flag: false,
        img: '',
        title: '逆月翎',
        is_show: true
      }
    },
    mounted: function () {
      var userInfo = JSON.parse(localStorage.getItem('user'));
      if (userInfo) {
        this.is_show = false;
      }
      var _this = this;
      this.$req({
        method: "post",
        url: 'http://49.235.28.88:3000/article/v1/getArticleList',
        data: {}
      }).then(function (res) {
        var articles = res.data.payload.article;
      }).catch(function (e) {
        _this.$message.error('服务器可能出现异常!');
      });
    },
    methods: {
      clearCookie() {
        console.log('清除缓存成功!');
        localStorage.removeItem('user');
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }

</script>

<style scoped>
  .left_menu {
    color: white;
  }

  .left_menu:hover {
    color: black;
  }
  #left_menu {
    float: left;
    width: 13%;
    margin-right: 20px;
  }

  @media (max-width: 767px) {
    #left_menu {
      display: none;
    }
  }

  .menu_name {
      color: black;
  }

  nav {
    /* background: white; */
    padding: 20px 0;
  }

  .info {
    margin-top: 10px;
    padding: 20px;
    /* background: white; */
  }

  .info_name {
    font-weight: 600;
    padding: 5px;
    color: white;
  }

  .info img {
    width: 120px;
    height: 120px;
  }

  .archive {
    padding-top: 20px;
  }

  .archive .archive_count {
    display: block;
    color: #222;
    font-weight: 600;
    font-size: 16px;
  }

  .archive .archive_name {
    display: block;
    color: #999;
    font-size: 14px;
  }

  .communication {
    padding-top: 20px;
  }

  .communication_item {
    display: inline-block;
    width: 40%;
    font-size: 14px;
    font-weight: 600;
    padding: 5px;
    color: white;
  }

  .active {
    position: relative;
  }

  .active img {
    position: absolute;
    top: -145px;
    left: 35px;
  }

  a {
    color: white;
  }

  .dropdown_li {
    color: black;
  }

  .avatar {
    width: 48px;
    height: 48px;
    background: url('./../assets/ni.jpg');
    background-size: cover;
    border-radius: 100px;
  }

  .default_img {
    border: 0;
    width: 135px;
    height: 135px;
  }

  span, .left_menu {
    color: white;
  }
  .top {
      color: black;
  }

</style>
